<template>
  <div class="title_reth_box">
    <HYTtile :title="title" />
    <video
      controls
      class="video"
      :src="$filters.prefix(videoSrc)"
      v-if="videoSrc && contestFileId == 0"
    ></video>
    <img
      :src="$filters.prefix(videoSrc)"
      alt=""
      v-if="videoSrc && contestFileId == 1"
    />
    <div v-if="content" v-html="content" class="v-html content_height"></div>
  </div>
</template>

<script lang="ts">
import { defineComponent, reactive, toRefs } from "vue";
import HYTtile from "@/components/HYTtile.vue";
export default defineComponent({
  name: "NavBar",
  components: {
    HYTtile,
  },
  props: {
    title: {
      type: String,
      default: "标题",
    },
    contestFileId: {
      type: Number,
      default: 1,
    },
    videoSrc: {
      type: String,
      default: "",
    },
    content: {
      type: String,
      default: "",
    },
  },
  setup() {
    const state = reactive({});

    return { ...toRefs(state) };
  },
});
</script>
<style lang="scss" scoped>
.title_reth_box {
  .content_height {
    max-height: 600px;
    overflow: auto;
  }
  .video {
    width: 335px;
    height: 202px;
    margin: 0 auto;
    margin-bottom: 15px;
  }
}
</style>
